<!--
 * @author: 十一
 * @since: 2024-06-19
 * index.vue
 * @desc: new page
-->
<template>
  <a-carousel class="banner" autoplay>
    <div v-for="item in advertisementList" :key="item.id">
      <img :src="item.url" alt="" srcset="" />
    </div>
  </a-carousel>
  <a-row class="card-group mt-5">
    <a-col :span="8" v-for="item in classificationList" :key="item.id">
      <div
        class="flex justify-between items-center flex-col card-item pt-16 pb-16"
        @mouseover="handleMouseover(item)"
        @mouseout="handleMouseout(item)"
        @click="handleClick(item)"
        :class="{ 'hover-class': item.isHovering }"
      >
        <img :src="item.fileUrl" alt="" srcset="" />
        <div>{{ item.title }}</div>
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getClassificationList ,getAdvertisementListApi} from '@/servers/main'
let router = useRouter()
let classificationList = ref([])

getClassificationList({parentIds: "1960151510432260098" }).then((res) => {
  res.result.records.forEach((item: any) => {
    item.isHovering = false
  })

  classificationList.value = res.result.records
})

const advertisementList = ref([])
const getAdvertisementList = ()=>{
  getAdvertisementListApi({ pageSize: 100, pageNo: 1 }).then((res) => {
    advertisementList.value = res.result.records
  })
}
getAdvertisementList()

const handleMouseover = (item: any) => {
  item.isHovering = true
}
const handleMouseout = (item: any) => {
  item.isHovering = false
}
const handleClick = (item: any) => {
  router.push(`/resource`)
}
</script>
<style scoped lang="less">
.banner {
  img {
    border-radius: 10px;
  }
}
.card-group {
  border-left: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
  cursor: pointer;
}
.card-item {
  border-bottom: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  img {
    width: 50px;
    height: 50px;
  }
}
.hover-class {
  text-decoration: none;
  color: #000000;
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
}
</style>
